{extend name="base" /}
{block name="css"}
{/block}
{block name="body"}
<div class="layui-card">
  <div class="layui-card-body">
     <blockquote class="layui-elem-quote layui-text">
        权限规则：<span class="text-danger">顶级菜单</span>控制器为空，图标选填
     </blockquote>
     <div class="layui-inline">
        <button class="layui-btn layui-btn-normal open-popup" data-title="{$Think.lang.add}" data-url="{:url('add')}"><i class="fa fa-plus"></i>{$Think.lang.add}</button>
     </div>
     <table id="tableAuth"></table>
   </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="tableBarAuth">
    {{#  if(d.type == 'nav'){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">{$Think.lang.add}子菜单</a>
    {{#  } }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">{$Think.lang.edit}</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">{$Think.lang.drop}</a>
</script>
<!-- 权限列 -->
<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-filter="*" lay-text="正常|锁定" data-url="{:url('status')}" {{d.status==1?'checked':''}}>
</script>
<script type="text/html" id="imgTpl"><i class="layui-icon {{ d.icon }}"></i></script>
{/block}
{block name="js"}
<script type="text/javascript">
    layui.config({
        base: '__AD_MOD__/'
    }).extend({
        treeTable: 'treeTable/treeTable'
    }).use(['treeTable'], function () {
        var treeTable = layui.treeTable;
        // 渲染表格
        var insTb = treeTable.render({
            elem: '#tableAuth',
            tree: {
                iconIndex: 0,  // 折叠图标显示在第几列
                idName: 'id',  // 自定义id字段的名称
                pidName: 'pid',  // 自定义标识是否还有子节点的字段名称
                isPidData: true  // 是否是pid形式数据
            },
            cellMinWidth: 100,
            cols: [
                // {type: 'numbers'},
                {field: 'name', title: '权限名称'},
                {field: 'url', title: '控制器'},
                {title: '排序号', align: 'center',field:'sort_order'},
                {field: 'icon', title: '图标',align:'center',templet:'#imgTpl'},
                {
                    title: '类型', templet: function (d) {
                        var strs = [
                            '<span class="layui-badge layui-badge-green">菜单</span>',
                            '<span class="layui-badge layui-badge-blue">按钮</span>'
                        ];
                        return strs[d.type=='nav'?0:1];
                    }, align: 'center', width: 100
                },
                {align: 'center', width: 100,title: '状态',templet:'#status'},
                {templet: '#tableBarAuth', title: '操作', align: 'center', width: 250}
            ],
            reqData: function (data, callback) {
                $.get("{:url('rule_json')}", function (res) {
                   var data = $.parseJSON(res);
                    callback(data);
                });
            }
        });
        treeTable.on('tool(tableAuth)', function (obj) {
            var event = obj.event;
            var data = obj.data;
            var id = data.id;
            if (event == 'del') {
                layer.confirm('确定要删除'+data.name+'？', {
                  btn: ['确定','取消'] //按钮
                }, function(){
                  $.ajax({
                    url: '{:url("del")}?id='+id,
                    type: 'post',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code === 1 && result.url != '') {
                            setTimeout(function () {
                                location.href = result.url;
                            }, 1000);
                        }
                        layer.msg(result.msg);
                    },
                    error: function (xhr, state, errorThrown) {
                        layer.msg(state + '：' + errorThrown);
                    }
                });
                });
            } else if (event == 'edit') {
                layer.open({
                  type: 2,
                  title: '修改 【'+data.name+'】 ',
                  shadeClose: true,
                  shade: false,
                  maxmin: true, //开启最大化最小化按钮
                  area: ['30%', '80%'],
                  content: '{:url("edit")}?id='+id
                });
                // layer.msg('修改'+data.name+''+id, {icon: 1});
            } else if (event == 'add') {
                layer.open({
                  type: 2,
                  title: '添加 【'+data.name+'】 子菜单',
                  shadeClose: true,
                  shade: false,
                  maxmin: true, //开启最大化最小化按钮
                  area: ['30%', '80%'],
                  content: '{:url("edit")}?pid='+id
                });
            }
        });
    });

</script>
{/block}
